import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index.vue'

Vue.use(VueRouter)

const routes = [
  //首页
  {
    path: '/',
    name: 'home',
    component: Index,
    meta: {
      title: '首页'
    }
  },
  //探索中国
  {
    meta: {
      title: '探索中国'
    },
    path: '/china',
    name: 'China',
    component: () => import('../views/China.vue'),
  },
  //旅行者之家
  {
    meta: {
      title: '旅行者之家'
    },
    path: '/traveller',
    name: 'traveller',
    component: () => import('../views/Traveller.vue'),
  },
  //景点详情页
  {
    meta: {
      title: '详情页'
    },
    path: '/detail',
    name: 'detail',
    component: () => import('../views/Detail.vue'),
  },
  //景点列表
  {
    meta: {
      title: '景点列表'
    },
    path: '/attractions',
    name: '',
    component: () => import('../views/Attractions.vue'),
  },
  //美食列表
  {
    meta: {
      title: '美食列表'
    },
    path: '/food',
    name: '',
    component: () => import('../views/Food.vue'),
  },
  //酒店列表
  {
    meta: {
      title: '酒店列表'
    },
    path: '/hotel',
    name: '',
    component: () => import('../views/Hotel.vue'),
  },
  //酒店详情页
  {
    meta: {
      title: '酒店详情'
    },
    path: '/hoteldetail',
    name: 'detail',
    component: () => import('../views/HotelDetail.vue'),
  },
  //游记发布
  {
    meta: {
      title: '游记发布'
    },
    path: '/editor',
    name: '',
    component: () => import('../views/Editor.vue'),
  },
  //登录页面
  {
    meta: {
      title: '登录',
      hideHeader: true, //隐藏页头
      hideFoot: true //隐藏页尾
    },
    path: '/login',
    name: '',
    component: () => import('../views/Login.vue'),
  },
  //注册页面
  {
    meta: {
      title: '注册',
      hideHeader: true, //隐藏页头
      hideFoot: true //隐藏页尾
    },
    path: '/register',
    name: '',
    component: () => import('../views/Register.vue'),
  },
  //个人中心
  {
    meta: {
      title: '个人中心',
      hideHeader: true, //隐藏页头
    },
    path: '/person',
    name: 'person',
    component: () => import('../views/Person.vue'),
  },
  //旅行/个人收藏夹
  {
    meta: {
      title: '旅行',
      hideHeader: true, //隐藏页头
    },
    path: '/collection',
    name: 'collection',
    component: () => import('../views/Collection.vue'),
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//路由守卫:可以监听路由所有跳转操作,并且是否允许跳转
//前置守卫 -- 在路由跳转前自动触发
router.beforeEach((to, from, next) => {
  console.log('to到哪来:', to);
  console.log('from从哪来:', from);
  //修改标题
  document.title = to.meta.title
  //如果用户访问的是登录页,则直接放行
  // if (to.path === '/login') return next()
  // if (to.path === '/register') return next()
  // if (to.path === '/') return next()
  //从sessionStorage 中获取到保存的 token 值
  // const tokenStr = window.sessionStorage.getItem('token')
  //如果没有 token 强置跳转到登录页
  // if (!tokenStr) return next('/login')
  //next:调用后 才能允许本次跳转 不调用不放行
  next()
})

export default router